import React, { useState } from 'react'
import { useExplainCode } from '@/hooks/useExplainCode'

export default function InnerRounding() {
  const [isChecked, setChecked] = useState<boolean>(true)
  const handleCheck = () => {
    setChecked(!isChecked)
  }

  const oCode = useExplainCode();
  return (
    <div>
      <section ref={oCode}>
        <h3 className="font-semibold text-xl mb-1 ">边框内圆角</h3>
        <div className="mt-4 mb-4 p-4 rounded-md bg-yellow-50">
          <p>
            我们知道`box-shadow`是会紧贴`border-radius`圆角边的，但是，描边`outline`
            并不会与圆角边`border-radius`贴合，我们可以将两者组合，通过`box-shadow`
            去填补描边`outline`所产生的间隙来达到我们想要的效果。
          </p>
        </div>
        <div className="relative border-l-4 border-red-500 mt-4 mb-4 p-4 bg-yellow-50">
          <p className="tip warning">
            关于扩张半径的取值？假设圆角`border-radius`的半径为r,根据勾股定理，扩张半径的最小值应
            等于`(√2−1)r ~= 3.314`，最大值不能超过描边宽度，即`6px`。
          </p>
        </div>
      </section>
      <main className="border">
        <input id="ck" type="checkbox" checked={isChecked} onChange={handleCheck} />
        <label htmlFor="ck">box-shadow</label>
        <div>A paragraph of filler text. La la la de dah de dah de dah de la.</div>
      </main>
      <style jsx>{`
        main{
          width: 100%;
          padding: 60px 80px 80px;
        }
        main div{
          width: 209px;
          margin: 29px auto;
          padding: 8px 16px;
          border-radius: 8px;
          background: #f4f0ea;
          outline: 6px solid #b4a078;
        }
        input{
          margin-left: calc(50% - 45px);
        }
        input:checked ~ div{
          box-shadow: 0 0 0 5px #b4a078;
        }
      `}</style>
    </div>
  )
}
